<template>
  <div style="padding: 0 50px">
    <div class="back-box">
      <el-button type="primary" @click="goBack(0)">返回</el-button>
    </div>
    <ContentWrap>
      <div class="title-box">
        <span class="title">一、基本信息</span>
      </div>
      <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="200">
        <el-row>
          <el-col :span="12">
            <el-form-item label="专场名称:" prop="eventName">
              <el-tooltip effect="dark" :content="formData?.eventName">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.eventName }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告编号:" prop="eventCode">
              <el-tooltip effect="dark" :content="formData?.eventCode">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.eventCode }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易总量(吨):" prop="tradingGrossAmount">
              <el-tooltip effect="dark" :content="formData?.tradingGrossAmount">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.tradingGrossAmount }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金(元):" prop="securityDeposit">
              <el-tooltip effect="dark" :content="formData?.securityDeposit">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.securityDeposit }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交货周期:" prop="deliveryCycle">
              <el-tooltip effect="dark" :content="formData?.deliveryCycle">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.deliveryCycle }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货地:" prop="deliveryPlace">
              <el-tooltip effect="dark" :content="formData?.deliveryPlace">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.deliveryPlace }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易日期:" prop="deliveryDate">
              {{ formData.deliveryDate }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易时间:" prop="deliveryTime">
              <span v-if="formData.startTime && formData.endTime">{{
                `${formData.startTime} -
                ${formData.endTime}`
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="倒计时(秒):" prop="countdown">
              {{ formData.countdown }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公示时间:" prop="announcementTime">
              {{ formatTime(formData.announcementTime, 'yyyy-MM-dd HH:mm:ss') }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易方式:" prop="tradingWay">
              {{ getDictLabel(DICT_TYPE.BID_TRADING_WAY, formData.tradingWay?.toString()) }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <div class="title-box">
        <span class="title">二、商品信息</span>
      </div>
      <el-table
        v-loading="loading"
        :data="formData.productBaseVOList || []"
        border
        stripe
        :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
      >
        <el-table-column label="场次时间" align="center" prop="sessionTime"> </el-table-column>
        <el-table-column label="产品名称" align="center" prop="coalName"> </el-table-column>
        <el-table-column label="交易量(吨)" align="center" prop="tradingAmount"> </el-table-column>
        <el-table-column
          :label="`${formData.tradingWay === 3 ? '挂牌' : '起拍'}价格(元/吨)`"
          align="center"
          prop="startingPrice"
        >
        </el-table-column>
        <el-table-column label="基本指标" prop="contactMobile">
          <template #default="scope">
            <el-row>
              <el-col :span="12">发热量</el-col>
              <el-col :span="12">{{ scope.row.calorificValue }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">灰分(Ad%)</el-col>
              <el-col :span="12">{{ scope.row.ashContent }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">硫分(St,d%)</el-col>
              <el-col :span="12">{{ scope.row.sulfurContent }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">水分(Mt%)</el-col>
              <el-col :span="12">{{ scope.row.hydration }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">挥发分(Vdaf%)</el-col>
              <el-col :span="12">{{ scope.row.volatileMatter }}</el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
    <ContentWrap>
      <div class="title-box">
        <span class="title">三、附加说明</span>
      </div>
      <div class="editor-box" v-html="formData.remark"> </div>
    </ContentWrap>
    <ContentWrap>
      <div class="title-box">
        <span class="title">四、指定客户</span>
      </div>
      <div class="spec-user">
        <span>指定客户:</span>
        <span v-if="formData.appointClientList?.length">
          <el-tag type="info" v-for="item in formData.appointClientList || []" :key="item.id">{{
            item.companyName
          }}</el-tag>
        </span>
      </div>
      <div class="text-red-500 mt-20px">* 不选择默认通知全部客户</div>
    </ContentWrap>
  </div>
</template>
<script lang="ts" setup>
import { formatTime } from '@/utils'
import * as Utils from '@/utils/dict'
import * as announceManage from '@/api/announceManage'

const loading = ref(false)
const clientList = ref([])
const formLoading = ref(false)
let formData: Record<string, any> = ref({})
const { DICT_TYPE, getDictLabel } = reactive(Utils)
const emit = defineEmits(['subPage'])

const goBack = (value: string) => {
  emit('subPage', value)
}

const props = defineProps({
  id: Number
})

const init = async () => {
  loading.value = true
  try {
    await getCustomList()
    const data = await announceManage.getDetailById({ id: props.id })
    if (data.startTime) {
      const startList = data.startTime.split(':')
      data.startTime = `${startList[0]}:${startList[1]}`
    }
    if (data.endTime) {
      const endList = data.endTime.split(':')
      data.endTime = `${endList[0]}:${endList[1]}`
    }
    formData.value = data
    if (!data.appointClientList) formData.value.appointClientList = []
    formData.value.appointClientList = clientList.value.filter((e: Record<string, any>) =>
      formData.value.appointClientList.includes(e.id)
    )
  } finally {
    loading.value = false
  }
}

const getCustomList = async () => {
  const data = await announceManage.getAllList()
  clientList.value = data
}

onMounted(() => {
  init()
})
</script>
<style lang="scss" scoped>
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .title {
    font-weight: bold;
  }
}

.editor-box {
  padding: 10px;
  overflow-wrap: break-word;
  border: 1px solid #e4e4e7;
}

.spec-user {
  display: flex;
  align-items: center;
  > .el-tag {
    margin-left: 12px;
  }
}

.back-box {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
